<template>
	<div class="head-pc">
		<el-row class="title">
			<el-col :span="24"><el-text size="large"></el-text></el-col>
		</el-row>
		<el-divider />
	</div>
</template>

<script setup lang="ts">
	import { ElLoading } from 'element-plus'
	import 'element-plus/theme-chalk/el-loading.css'
	var loadFuc = function () {
		const loading = ElLoading.service({
			lock: false,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.5)',
			fullscreen: true,
		})
		setTimeout(() => {
			loading.close()
		}, 2000)
	}
	loadFuc();
</script>

<style>
	.el-text {
		color: #00007f;
		font-size: 18px;
	}

	.el-divider--horizontal {
		margin: 0;
	}

	.head-pc .title {
		font-size: 14px;
		animation: content-slide-in 2s steps(18) forwards;
		overflow: hidden;
		white-space: nowrap;
	}

	.head-pc {
		height: 80px;
		width: 100%;
		text-align: center;
		line-height: 80px;
	}

	@keyframes content-slide-in {
		from {
			width: 0;
		}

		to {
			width: 100%;
		}
	}
</style>